<template>
	<view class="">
		<navbar title="物流详情" :back="true" bgColor="#FF3F3F" leftIconColor="#fff" color="#fff"></navbar>
		<view style="background: linear-gradient(180deg, #FF3F3F 0%, rgba(255,63,63,0) 100%);height:220rpx;position: relative;padding: 20rpx;">
			<view style="background-color: #fff;border-radius: 20rpx;padding: 20rpx;position: absolute;bottom: -120rpx;">
				<view style="display: flex;padding-bottom: 20rpx;border-bottom: 2rpx solid #eee;">
					<image :src="det.cover" mode="" style="width:176rpx;height: 176rpx;border-radius: 20rpx;"></image>
					<view style="margin-left: 20rpx;width: 70%;">
						<view style="width: 470rpx;overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;word-break: break-all;font-weight: 650;font-size: 26rpx;">{{det.title}}</view>
						<!-- <view style="display: flex;align-items: center;font-size: 24rpx;margin: 16rpx 0;">
							<view style="color: #999;">规格:</view>
							<view style="color:#333;margin-left: 10rpx;">{{det.specns}}</view>
						</view> -->
						<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 40rpx;">
							<view style="color:#999;font-size: 24rpx;">申请数量: x{{det.num}}</view>
							<view style="color: #FF3F3F;font-weight: 650;">¥{{det.price}}</view>
						</view>
					</view>
				</view>
				<view style="font-size: 24rpx;color: #666;display: flex;align-items: center;padding-top: 20rpx;">
					<view class="">承运快递:</view>
					<view style="margin-left: 10rpx;">{{det.expressName}}</view>
				</view>
				<view style="font-size: 24rpx;color: #666;display: flex;align-items: center;padding-top: 10rpx;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<view class="">快递单号:</view>
						<view style="margin-left: 10rpx;">{{det.expressNum}}</view>
					</view>
					<view style="width: 80rpx;text-align: center;font-size:24rpx;border-radius: 20rpx;padding:10rpx 0;border: 2rpx solid #666;">复制</view>
				</view>
			</view>
		</view>
		<view style="height:140rpx;"></view>
		<view style="padding: 0 20rpx 40rpx 20rpx;">
			<view style="padding: 20rpx;background-color: #fff;border-radius: 20rpx;">
				<u-steps current="0" activeIcon="heart-fill" inactiveIcon="heart" direction='column' activeColor='red'>
					<view v-for="(item,index) in tracesData" :key="index">
						<u-steps-item :title="item.context" :desc="item.time"></u-steps-item>
					</view>
				</u-steps>
			</view>
			<!-- <view style="margin:50rpx 0 30rpx 0;text-align: center;">
				<image src="https://cdn.yowswl.com/image/admin/2024/01/10/bd6bc8bea00243e5a970f6f13e09642drshebvkda3.png" mode="widthFix" style="width: 300rpx;"></image>
			</view> -->
			<!-- <view style="background-color: #fff;padding:20rpx 0;margin-bottom: 20rpx;border-radius: 20rpx;" v-for="(item,index) in shopList" :key="index">
				<view style="display: flex;padding:0 20rpx;">
					<image :src="item.cover" mode="" style="width: 196rpx;height: 196rpx;border-radius: 20rpx;"></image>
					<view style="margin-left: 20rpx;width: 438rpx;">
						<view style="width: 438rpx;overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;word-break: break-all;font-weight: 650;font-size: 24rpx;">
							<view style="display: inline-block;">
								<view style="display: flex;align-items: center;">
									<view style="font-size: 0;width: 24rpx;height: 24rpx;display: inline-block;">
										<image src="https://cdn.yowswl.com/image/admin/2024/01/10/93e86fb23af440f99cfe72a6e5e70aa95m0uvfr9sg.png" mode="" style="width:100%;height: 100%;"></image>
									</view>
									<view v-if="item.isSele" style="display: inline-block;font-size:24rpx;width:52rpx;height: 30rpx;text-align: center;line-height: 30rpx;color:#fff;border-radius: 6rpx;margin: 0 10rpx;background:linear-gradient(90deg, #FF522C 0%, #FFA27A 100%);font-size: 16rpx;">严选</view>
									<view v-if="item.isGood" style="display: inline-block;font-size:24rpx;width:52rpx;height: 30rpx;text-align: center;line-height: 30rpx;color:#fff;border-radius: 6rpx;background:linear-gradient(90deg, #9F7EFF 0%, #D06DFF 100%);font-size: 16rpx;margin-right: 10rpx;">好物</view>
								</view>
							</view>
						    {{item.title}}
						</view> -->
					<!-- 	<view style="font-size:28rpx;display: flex;align-items: center;justify-content: space-between;color: #666;margin-top:10rpx;">
							<view style='text-align: center;color:#FF3F3F;'>
								<view style="font-size: 20rpx;">哔滴高佣</view>
								<view style="font-size: 28rpx;">{{item.highCom}}</view>
							</view>
							<image src="https://cdn.yowswl.com/image/admin/2023/12/20/283d8412dafc448fa4d4448cd573a961nj1sptlmx6.png" mode="" style="width:36rpx;height: 36rpx;"></image>
							<view style='text-align: center;'>
								<view style="font-size: 20rpx;">独家佣金</view>
								<view style="font-size: 28rpx;">{{item.exclusive}}</view>
							</view>
							<view style="background-color: #bbb;width: 2rpx;height: 52rpx;margin: 20rpx 0;"></view>
							<view style='text-align: center;'>
								<view style="font-size: 20rpx;">精选佣金</view>
								<view style="font-size: 28rpx;">{{item.}}</view>
							</view>
						</view> -->
<!-- 						<view style="display: flex;align-items: center;font-size:#333;font-weight: 620;margin-top: 20rpx;">
							<view style="font-size: 20rpx;">直播价:</view>
							<view style="margin-left: 16rpx;font-size: 28rpx;">¥{{item.price}}</view>
						</view>
						<view style="margin-top:20rpx;display: flex;justify-content: space-between;align-items: center;">
							<view style='display: flex;align-items: center;font-size: 20rpx;'>
								<text style="color: #a9a9a9;">近30日销量</text><text
									style="margin: 0 4rpx;"></text><text style="color:#a9a9a9;">{{parseFloat(item.sales).toFixed(2)}}w</text>
							</view>
							<view style="background:linear-gradient(180deg, #FF3F3F 0%, #FF6565 100%);width: 216rpx;text-align: center;height: 56rpx;line-height: 50rpx;border-radius: 20rpx 0 0 20rpx;">
								<view style="display: inline-block;color:#fff;font-size: 20rpx;">预估赚 ¥<text style="font-size: 24rpx;">{{item.sales}}</text></view>
							</view>
						</view>
					</view>
				</view>
				
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getSamplesInfo,
		getlogisticsInfo
	} from "@/api/samples.js"
	
	import navbar from '@/components/baseNavbar.vue'
	export default{
	    components:{
			navbar
		},
		data(){
			return{
				det:{},
				params:{
					page:1,
					limit:20,
					load:true,
					isRecommend:1
				},
				shopList:[
					{
						image:'https://cdn.yowswl.com/image/admin/2023/11/22/c0b2a8f548dc402f9994e3df3f3261dc01mm30qnc5.png',
						name:'抖音电商源头优选X亚鸥商达撮合会-广州站111111111111111111111111111111111111111111111111111',
						price:'2837.9',
						time:'7',
						sales:'21.58',
						highCom:'55%',
						exclusive:'50%',
						selected:'45%',
						estimate:'83.15',
						isSele:1,
						isGood:1,
						id:25
					}
				],
				tracesData:[
					{
						areaCode: "CN510114001000",
						areaName: "四川,成都市,新都区,大丰",
						context: "【成都市】 快件已在 成都大丰一部 被退回签收，签收人为【签收退回发件人】，如有疑问请电联派件业务员：18080058160，签收网点电话：028-63205882，投诉电话：028-63205882、19138971931。感谢使用中通快递，期待再次为您服务！",
						ftime: "2023-09-25 11:19:00",
						status: "退签",
						time: "2023-09-25 11:19:00"
					},{
						areaCode: "CN510114001000",
						areaName: "四川,成都市,新都区,大丰",
						context: "【成都市】成都大丰一部 的业务员【大丰一部退货组,18080058160】正在为您派件（95720为中通快递员外呼专属号码，请放心接听，如有问题可联系网点:028-63205882,投诉电话:028-63205882、19138971931）",
						ftime: "2023-09-25 11:18:25",
						status: "派件",
						time: "2023-09-25 11:18:25"
					},{
						areaCode: "CN510114001000",
						areaName: "四川,成都市,新都区,大丰",
						context: "【成都市】 快件已到达 成都大丰",
						ftime: "2023-09-25 08:25:14",
						status: "在途",
						time: "2023-09-25 08:25:14"
					},{
						areaCode: "CN510100000000",
						areaName: "四川,成都市",
						context: "【成都市】 快件已发往 成都大丰",
						ftime: "2023-09-25 02:03:58",
						status: "在途",
						time: "2023-09-25 02:03:58"
					},{
						areaCode: "CN510100000000",
						areaName: "四川,成都市",
						context: "【成都市】 快件已到达 成都转运中心",
						ftime: "2023-09-25 02:03:40",
						status: "在途",
						time: "2023-09-25 02:03:40"
					},{
						areaCode: "CN140700000000",
						areaName: "山西,晋中市",
						context: "【晋中市】 快件已发往 下一站",
						ftime: "2023-09-24 03:58:41",
						status: "在途",
						time: "2023-09-24 03:58:41"
					},{
						areaCode: "CN510114001000",
						areaName: "四川,成都市,新都区,大丰",
						context: "【成都市】 成都大丰一部（028-63205882）青白江杨春林（17682308201） 已揽收",
						ftime: "2023-09-18 10:39:52",
						status: "揽收",
						time: "2023-09-18 10:39:52"
					}
				]
			}
		},
		onLoad(option) {
			if(option.id){
				console.log('11',option.id);
				getSamplesInfo({id:option.id}).then(res=>{
					this.det = res.data
				})
				getlogisticsInfo({id:option.id}).then(res=>{
					this.tracesData = res.data
				})
			
			}
		},
		
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		height: 100%;
	}
</style>